import React, {
  useEffect,
  useLayoutEffect,
  forwardRef,
  useRef,
  useImperativeHandle
} from "react";

const JMap2 = (props, ref) => {
  const { markers } = props;
  let map = null;
  const lineArr = [
    [116.478935, 39.997761],
    [116.478939, 39.997825],
    [116.478912, 39.998549],
    [116.478912, 39.998549],
    [116.478998, 39.998555],
    [116.478998, 39.998555],
    [116.479282, 39.99856],
    [116.479658, 39.998528],
    [116.480151, 39.998453],
    [116.480784, 39.998302],
    [116.480784, 39.998302],
    [116.481149, 39.998184],
    [116.481573, 39.997997],
    [116.481863, 39.997846],
    [116.482072, 39.997718],
    [116.482362, 39.997718],
    [116.483633, 39.998935],
    [116.48367, 39.998968],
    [116.484648, 39.999861]
  ];
  let markerCar;
  useLayoutEffect(() => {
    map = new AMap.Map("dialog_map", {
      zoom: 17,
      center: [102.342785, 35.312316],
      mapStyle: "amap://styles/light"
    });
    console.log("useLayoutEffect");
    addMarker();
  }, []);

  function addMarker() {
    // console.log("addmarker");
    if (!map) {
      map = new AMap.Map("dialog_map", {
        zoom: 17,
        center: [102.342785, 35.312316],
        mapStyle: "amap://styles/light"
      });
    }
    map.clearMap();
    let marker = new AMap.Marker({
      icon: new AMap.Icon({
        imageSize: new AMap.Size(22, 30),
        image:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"
      }),
      position: markers,
      offset: new AMap.Pixel(-11, -15)
    });
    marker.setMap(map);
    map.setFitView(marker, null, null, 6); //视口自适应
    marker.on("click", function(e) {
      marker.setLabel({ content: item.carObj.no });
    });
  }

  function setGjMarker() {
    // console.log("gjmarker");
    if (!map) {
      map = new AMap.Map("dialog_map", {
        zoom: 17,
        center: [102.342785, 35.312316],
        mapStyle: "amap://styles/light"
      });
    }
    map.clearMap();
    markerCar = new AMap.Marker({
      map: map,
      position: [116.478935, 39.997761],
      icon: "https://webapi.amap.com/images/car.png",
      offset: new AMap.Pixel(-26, -13),
      autoRotation: true,
      angle: -90
    });

    // 绘制轨迹
    var polyline = new AMap.Polyline({
      map: map,
      path: lineArr,
      showDir: true,
      strokeColor: "#28F", //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6 //线宽
      // strokeStyle: "solid"  //线样式
    });

    var passedPolyline = new AMap.Polyline({
      map: map,
      // path: lineArr,
      strokeColor: "#f00", //线颜色
      // strokeOpacity: 1,     //线透明度
      strokeWeight: 6 //线宽
      // strokeStyle: "solid"  //线样式
    });

    markerCar.on("moving", function(e) {
      passedPolyline.setPath(e.passedPath);
    });

    map.setFitView();
  }
  const mapref = useRef(null);
  useImperativeHandle(ref, () => {
    console.log("useImperativeHandle");
    return {
      setGjHandler(type) {
        // console.log("map:" + map);
        // console.log("markerCar:" + markerCar);
        if (type === "play") {
          markerCar.moveAlong(lineArr, 200);
        } else if (type === "pause") {
          markerCar.pauseMove();
        }
      },
      setAddMarker() {
        addMarker();
      },
      setMarkerCar() {
        setGjMarker();
      }
    };
  });
  return (
    <div
      id="dialog_map"
      ref={mapref}
      style={{ width: "100%", height: "100%" }}
    ></div>
  );
};

export default forwardRef(JMap2);
